<template>
  <div class="search">
    <van-nav-bar fixed title="电影列表" left-arrow @click-left="$router.go(-1)" />

    <van-search
      shape="round"
      background="#ffffff"
      :value="querySearch || '搜索电影' "
      show-action
      @click="$router.push('/search')"
    >
      <template #action>
        <van-icon class="tool" name="apps-o" />
      </template>
    </van-search>
  <div v-if="loading" class="loading-container">
    <van-loading type="spinner" size="24px" vertical/> <!-- 加载指示器 -->
       <div class="loading-goods">加载中，请稍候...</div>
  </div>
    <div v-else>
      <div v-if="prolist.length > 0"  class="goods-list">
      <movielist :list="prolist"></movielist>
    </div>
    <van-empty v-else image="search" description="抱歉，当前电影还没有喔" />
    </div>
  </div>
</template>

<script>
// import GoodsItem from '@/components/GoodsItem.vue'
import { getMovieList } from '@/api/movielist'
import movielist from '@/components/MovieList.vue'
export default {
  name: 'SearchIndex',
  components: {
    movielist
  },
  data () {
    return {
      page: 1,
      prolist: [],
      sortlistbgc: true,
      loading: true
    }
  },
  computed: {
    // 获取地址url的关键字
    querySearch () {
      return this.$route.query.search
    }
  },
  created () {
    const res = getMovieList()
    this.prolist = res.filter(movie => movie.name.includes(this.querySearch))
    setTimeout(() => {
      this.loading = false
    }, 700)
  },
  methods: {
    handleValue () {
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  padding-top: 46px;
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }
  .tool {
    font-size: 24px;
    height: 40px;
    line-height: 40px;
  }

  .sort-btns {
    display: flex;
    height: 36px;
    line-height: 36px;
    .sort-item {
      text-align: center;
      position: relative;
      flex: 1;
      font-size: 16px;
      .sortlist{
        display: flex;
        position: absolute;
        left: 65%;
        top: 11%;
        flex-direction: column;
        width: 20px;
        height: 32px;
        font-size: 12px;
        .sortlistBgc{
          color:#1989fa;
        }
      }
    }
  }
}

// 商品样式
.goods-list {
  background-color: #f6f6f6;
}
// loading加载
.loading-container{
  margin-top: 100px;
  .loading-goods{
    text-align: center;
    font-size: 14px;
    color: #999;
    line-height: 100px;
  }
}
</style>
